Obsidian Advanced Slides Plugin 网格组件

通过使用 <grid> 标签，可以对幻灯片内容进行分块布局。

1 内容

<grid> 布局能够调整幻灯片内容的大小和位置。

• Drag 参数：调整幻灯片的内容（块）的大小。
• Drop 参数 ：指定块的放置幻灯片的位置。

2 基本语法

<grid drag="width height" drop="x y">

3 坐标和定位

对于 Drag 参数，可以设置 x 和 y 设置正值和负值。正值和负值的总结如下：

• 正 x 值： 表示块距离幻灯片左边边缘的距离。
• 负 x 值： 表示块距离幻灯片右边边缘的距离。
• 正 y 值： 表示块距离幻灯片顶部边缘的距离。
• 负 y 值：表示块距离幻灯片底部边缘的距离。

4 幻灯片示例

X 和 Y 轴释义

<grid drag="25 55" drop="-5 10" style=bg="green">
25 x 55

常用网格位置

为了方便，此插件对一些常用的网格位置进行命名。命名位置可以用于替代 drop 参数的 x 和 y 坐标。具体列表如下：

• center
• top
• bottom
• left
• right
• topleft
• topright
• bottomleft
• bottomright

Flow

语法定义于网格排版流程。下面展示了如何使用 Flow 语法结构。

<grid drag="width height" drop="x y" flow="col | row">

对于 col 或 row 属性定义布局行为。如果为指定 flow 属性。将会自动继承默认的 col 流行为。

Column Flow

当 flow="col" 时，网格内布局如下：

• 多个块将会垂直显示。
• 每个块之间的间距相同。
• 第一个块上方和最后一个块的下方间距相同。

以下幻灯片将会阐述这些说明。

Row Flow

当 flow=row 时，布局如下：

• 多个块将会水平显示。
• 每个块间距相同。
• 第一块和最后一个块的距离起点和终点距离相同。
  以下幻灯片将会阐述这些说明。

属性

bg 参数

bg 参数用于定义 Grid 的背景。具体语法如下：

<grid  drag="width height" drop="x y" bg="color">

其中，bg 参数的颜色可以使用任何有效的 CSS 颜色值。

Noise

Border

Grid 中的 Border 属性可以显示自定义边框，具体语法如下。

<grid  drag="width height" drop="x y" border="width style color">

其中：

• Border 的线条宽度选项为： thin,medum,thick 或者使用像素值（如10px）.
• Border 的线条样式可选为：dotted, solid, dashed, inset, 或者 outset。
• Border 参数的颜色可以使用任何有效的 CSS 颜色值。

这里有一个简单的例子：

thick dotted blue

Animation

animate 属性能够用于定义grid 的动画。

<grid  drag="width height" drop="x y" animate="type speed">

• fadeIn
• fadeOut
• slideRightIn
• slideLeftIn
• slideUpIn
• slideDownIn
• slideRightOut
• slideLeftOut
• slideUpOut
• slideDownOut
• scaleUp
• scaleUpOut
• scaleDown
• scaleDownOut

Opacity

Opacity 属性用于控制网格的不透明度。具体语法如下：

<grid  drag="width height" drop="x y" opacity="level">

其中 level 可以取值 0.0 到 1.0 之间的人一直。透明度为 0.0 时网格不可见。

Filter

Filter 属性用于定义网格的过滤效果，具体语法如下：

<grid  drag="width height" drop="x y" filter="effect">

对于Filter 属性的效果可以使以下类型之一：

• blur（模糊）
• bright（明亮）
• contrast（对比度）
• grayscale（灰度）
• hue(色调)
• invert（反转）
• saturate（饱和）
• sepia（棕褐色）

这里有个例子：

Text is too blurry

Rotate

Rotate 属性用于控制网格的二维旋转，具体语法如下：

<grid  drag="width height" drop="x y" rotate="deg">

deg 选项为正数和负数，表示0到360 度旋转范围。
这里有个例子：

World!

Padding

Paddin 填充属性用于定义网格自定义的填充。

<grid  drag="width height" drop="x y" pad="top right bottom left">

Alignment

align 用于网格的水平对齐。

<grid  drag="width height" drop="x y" align="type">

可用的选项如下：

• left
• right
• center (default)
• justify / block
• top
• bottom
• topleft
• topright
• bottomleft
• bottomright
• stretch

下面是示例演示。